<template>
  <div class="catgoods">
    <van-tabs>
      <van-tab v-for="item in opt_infos">
        <div slot="title" @click="changeTab(item)">
          {{item.opt_name}}
        </div>
      </van-tab>
    </van-tabs>

    <div v-for="item in opt_infos">
      <transition name="fade-choose">
        <div class="product-list-wrapper" v-if="item.opt_name === opt_name ">
          <goods-list :optId="opt_id"></goods-list>
        </div>
      </transition>
    </div>

  </div>
</template>

<script>
import { cateproductList } from "../../api/getDatas";
import goodsList from "./childern/goodsList";

export default {
  components: {
    scroll,
    goodsList
  },
  data() {
    return {
      opt_id: null,
      opt_type: null,
      size: 100,
      offset: 0,
      opt_infos: null,
      opt_name: "全部"
    };
  },
  methods: {
    changeTab(item) {
      this.opt_name = item.opt_name;
      this.opt_id = item.id;
    },

    initData() {
      cateproductList(this.opt_id, this.opt_type, this.size, this.offset)
        .then(res => {
          let infos = [{ opt_name: "全部", id: this.$route.query.opt_id }];
          this.opt_infos = infos.concat(res.data.opt_infos);
          console.log(res.data);
        })
        .catch(err => {
          this.initData();
        });
    }
  },
  created() {
    if (!this.$route.query.opt_id) {
      alert("参数错误");
      this.$router.back();
    }
    this.opt_id = this.$route.query.opt_id;
    this.opt_type = this.$route.query.opt_type;
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.product-list-wrapper {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
  .scroll-wrapper {
    height: 100%;
    overflow: hidden;
  }
}

.fade-choose-enter-active,
.fade-choose-leave-active {
  transition: all 0.3s;
}
.fade-choose-leave,
.fade-choose-leave-active {
  display: none;
}
.fade-choose-enter,
.fade-choose-leave-active {
  opacity: 0;
}
</style>

